<template>
  <d2-container v-loading="wrapperLoading" class="logo-container">
    <el-form
      ref="form"
      label-position="top"
      label-suffix=":"
      :model="sysConfig"
      :rules="rules"
      class="form-wrap pt10 pl10"
      flex
    >
      <div v-if="showLeftFlag" class="form-item form-item-left pr20">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="菜单布局">
              <el-radio-group v-model="sysConfig.dispCss.layoutType" @change="changeLayoutType">
                <el-radio-button :label="2">左侧菜单</el-radio-button>
                <el-radio-button :label="1">横向菜单</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宽度">
              <el-input-number
                v-model="sysConfig.dispCss.width"
                placeholder="请输入"
                class="w100"
                :min="50"
                :max="500"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字体大小">
              <el-input-number
                v-model="sysConfig.dispCss.fontSize"
                placeholder="请输入"
                class="w100"
                :min="12"
                :max="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字体行高">
              <el-input-number
                v-model="sysConfig.dispCss.lineHeight"
                placeholder="请输入"
                class="w100"
                :min="1"
                :max="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字符间距">
              <el-input-number
                v-model="sysConfig.dispCss.letterSpacing"
                placeholder="请输入"
                class="w100"
                :min="0"
                :max="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="左间距">
              <el-input-number
                v-model="sysConfig.dispCss.paddingLeft"
                placeholder="请输入"
                class="w100"
                :min="0"
                :max="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上间距">
              <el-input-number
                v-model="sysConfig.dispCss.paddingTop"
                placeholder="请输入"
                class="w100"
                :min="0"
                :max="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="右间距">
              <el-input-number
                v-model="sysConfig.dispCss.paddingRight"
                placeholder="请输入"
                class="w100"
                :min="0"
                :max="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下间距">
              <el-input-number
                v-model="sysConfig.dispCss.paddingBottom"
                placeholder="请输入"
                class="w100"
                :min="0"
                :max="30"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="字体颜色">
              <el-color-picker v-model="sysConfig.dispCss.color" show-alpha />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备选样式">
              <div>
                <el-checkbox
                  v-model="sysConfig.dispCss.textAlignLast"
                  :true-label="1"
                  :false-label="0"
                  >最后一行文字两端对齐</el-checkbox
                >
              </div>
              <div>
                <el-checkbox
                  v-model="sysConfig.dispCss.textAlignCenter"
                  :true-label="1"
                  :false-label="0"
                  >文案居中</el-checkbox
                >
              </div>
              <div>
                <el-checkbox
                  v-model="sysConfig.dispCss.fontWeightBold"
                  :true-label="1"
                  :false-label="0"
                  >字体加粗</el-checkbox
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-item form-item-right" :class="{ pl20: showLeftFlag }">
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="sysConfig.systemName" placeholder="请输入">
            <el-button slot="append" @click="showLeftFlag = !showLeftFlag">设置样式</el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="背景图">
          <img-upload v-model="sysConfig.loginBackImg" class="same-wrap" />
        </el-form-item>

        <el-form-item label="LOGO">
          <img-upload v-model="sysConfig.ico" class="same-wrap" />
        </el-form-item>

        <el-form-item label="启用验证码" prop="checkCodeFlag">
          <el-radio-group v-model="sysConfig.checkCodeFlag">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="版本号">
          <el-input v-model="sysConfig.dispCss.apkVersion" placeholder="请输入版本号"> </el-input>
        </el-form-item>

        <el-form-item label="apk上传">
          <btn-upload
            v-model="sysConfig.dispCss.apkDownloadURL"
            placeholder="请输入apk上传地址"
            :size="40"
          >
          </btn-upload>
        </el-form-item>

        <!-- <el-form-item label="下载地址">
          <el-input v-model="sysConfig.dispCss.downloadURL" placeholder="请输入下载地址">
          </el-input>
        </el-form-item> -->
        <el-button type="primary" :loading="btnLoading" @click="doSave">提交</el-button>
      </div>
    </el-form>
  </d2-container>
</template>

<script>
import ImgUpload from "./components/img-upload";
import { LogoSave } from "api/sys-logo-config";
import rules from "./config/rules";
import { mapState, mapActions } from "vuex";

export default {
  name: "system-logo",
  components: { ImgUpload },
  data() {
    return {
      // 校验规则
      rules,
      // 提交按钮加载动画
      btnLoading: false,
      // 面板加载动画
      wrapperLoading: false,
      showLeftFlag: false,
    };
  },
  computed: {
    ...mapState("d2admin", {
      sysConfig: (state) => state.sysConfig.info,
      layoutType: (state) => state.layout.layoutType,
    }),
  },
  created() {},
  methods: {
    ...mapActions({
      sysConfigSet: "d2admin/sysConfig/set",
      toggleLayout: "d2admin/layout/toggle",
    }),
    /**
     * 保存
     */
    async doSave() {
      try {
        this.btnLoading = true;
        await LogoSave(this.getSubmitValue());
        this.$message.success("系统基本信息配置成功");
        this.sysConfigSet(this.sysConfig);
      } catch (e) {
        console.log(e);
      } finally {
        this.btnLoading = false;
      }
    },
    /**
     * 获取提交的数据
     */
    getSubmitValue() {
      const { dispCss, ...rest } = this.sysConfig;
      return { ...rest, dispCss: JSON.stringify(dispCss) };
    },
    /**
     * 菜单布局切换
     */
    changeLayoutType() {
      if (this.layoutType === this.sysConfig.dispCss.layoutType) {
        return;
      }
      this.toggleLayout();
    },
  },
};
</script>

<style lang="scss" scoped>
.logo-container {
  .same-wrap {
    width: 200px;
  }

  .form-item {
    width: 300px;
  }

  .form-item-left {
    border-right: 1px solid #e4e7ed;
  }

  .right-animate {
    width: 300px;
  }
}
</style>
